<template>
  <div>
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          label-width="70px">
          <el-row>
            <el-col :span="8">
              <div class="grid-content ep-bg-purple"/>
              <el-form-item label="策略名称" prop="trafficRuleName">
                <el-input v-model="queryParams.trafficRuleName" @change="getList"
                          placeholder="请输入策略名称" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button @click="handleQuery" type="primary">
                  <span>查询</span>
                </el-button>
                <el-button @click="resetQuery" plain>
                  <span>重置</span>
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="grid-content ep-bg-purple-light"/>
            </el-col>
            <el-col :span="8" style="display: flex;justify-content: flex-end" v-if="false">
              <el-form-item>
                <el-button @click="handleAdd('add',)" type="primary">
                  <span>添加</span>
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-table
          v-loading="loading"
          :data="dataList"
        >
          <el-table-column
            label="策略名称"
            align="center"
            key="strategy_name"
            prop="strategy_name"
          >
            <template slot-scope="scope">
              {{ scope.row.strategy_name ? scope.row.strategy_name : "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            key="create_Time"
            prop="create_Time"
          >
            <template slot-scope="scope">
              {{ scope.row.create_time ? $moment(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            align="center"
            width="310"
          >
            <template slot-scope="scope">
              <div style="width: 100%">
                <el-button
                  class="btn-blue"
                  size="small"
                  plain
                  @click="handleAdd('edit',scope.row,scope.$index)"
                >查看
                </el-button>
                <el-button
                  v-if="false"
                  class="btn-red"
                  size="small"
                  plain
                  type="danger"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        /> -->
        <div class="bottomBox">
          <pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                    :page-sizes="[20, 100, 500]" @pagination="getList"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {deleteTrafficRule, queryTrafficRule} from "@/api/intelligent";

export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        trafficRuleName: "",
        beginTime: "",
        endTime: "",
      },
      dataList: [],
      loading: true,
      total: 0,
    }
  },
  mounted() {

  },
  methods: {
    handleDispatch(row, index) {
      // console.log(this)
      this.$emit("handleDispatch", row, index)
    },
    handleAdd(type, row, index) {
      // console.log('row',row)
      let arr = []
      let title = ''
      switch (type) {
        case 'add':
          title = '添加';
          break;
        default:
          title = '编辑';
          arr = row
          break;
      }
      this.$emit("handleAdd", {"row": row, "index": index, "title": title, "arr": arr,})
    },
    getList() {
      this.loading = true;
      console.log(this.queryParams)
      queryTrafficRule(this.queryParams).then((res) => {
        // console.log('RES',res)
        this.loading = false;
        this.dataList = res.data_list;
        this.total = res.record_count || 0;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryRef.resetForm("queryRef");
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        trafficRuleName: "",
        beginTime: "",
        endTime: "",
      }
      this.handleQuery();
    },
    handleDelete(row) {
      this.$confirm(`确定要删除"${row.trafficRuleName}"吗?`).then(() => {
        deleteTrafficRule({"trafficRuleId": row.trafficRuleId}).then(res => {
          this.$message.warning('删除成功')
          (res) ? this.$message.warning('删除成功') : ""
          this.getList()
        })
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>
.bottomBox {
  display: flex;
  justify-content: flex-end;
}
</style>
